<template>
  <div class="app-page-box">
    <div class="app-page">
      <span class="state">
        <img src="/@/assets/images/count.png" alt="" />
        租金计算器
      </span>
      <div class="plan-desc">
        <div class="plan-name">【凯斯纽荷兰贴息】一倒算厂商贴息</div>
        <div class="plan-info">
          <span>租赁期限：<em>36个月</em></span>
          <span>还款间隔：<em>月</em></span>
          <span>计算方式：<em>利息递减</em></span>
          <span>报价利率：<em>3.99%</em></span>
        </div>
      </div>
      <a-form :model="formData" layout="inline" :wrapper-col="wrapperCol">
        <a-row :gutter="20">
          <a-col :span="8">
            <a-form-item label="销售总额：" name="a">
              <a-input v-model:value="formData.a" placeholder="请输入" style="width: 280px" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-form-item label="倒算对象：" name="b">
              <a-select v-model:value="formData.b" placeholder="请选择" style="width: 280px">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="3">
            <a-form-item label="首付款：" name="c">
              <a-select v-model:value="formData.c" placeholder="请选择">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
              <p>首付款金额：3.000.000.00元</p>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="" name="d"> <a-input v-model:value="formData.d" placeholder="请输入" style="width: 80px" />% </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="起租日:" name="e">
              <a-range-picker v-model:value="formData.e" type="date" :placeholder="['请选择','请选择']" style="width: 280px" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="每月还款日:" name="f">
              <a-select v-model:value="formData.f" placeholder="请选择" style="width: 280px">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="计算方式:" name="g">
              <a-select v-model:value="formData.g" placeholder="请选择" style="width: 280px">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="租赁期限:" name="h">
              <a-select v-model:value="formData.h" placeholder="请选择" style="width: 280px">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="还款间隔:" name="i">
              <a-select v-model:value="formData.i" placeholder="请选择" style="width: 280px">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="大额还款月:" name="j">
              <a-select v-model:value="formData.j" placeholder="请选择" style="width: 280px">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4" label="收取保证金:">
            <a-form-item label="大额还款月:" name="k">
              <a-select v-model:value="formData.k" placeholder="请选择">
                <a-select-option value="shanghai">Zone one</a-select-option>
                <a-select-option value="beijing">Zone two</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="19">
            <a-form-item label="" name="l"> <a-input v-model:value="formData.l" placeholder="请输入" style="width: 80px" />% </a-form-item>
          </a-col>
          <p>收取保证金金额额：3.000.000.00元</p>
          <div class="total">
            <span>销售总额：<em>10,000,000.00元</em></span>
            <span>融资总额：<em>7.000.000.00元</em></span>
          </div>
          <a-col :span="24">
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <div class="next">
                <a-button type="default" class="reset" @click="onSubmit">重置</a-button>
                <a-button type="primary" class="next-step submit" @click="onSubmit">下一步</a-button>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script setup>
  import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue';
  const labelCol = ref({ style: { width: '120px' } });
  const wrapperCol = ref({ span: 14 });
  const formData = ref({
    a: '',
    b: '',
    c: '',
    d: '',
    e: '',
    f: '',
    g: '',
    h: '',
    i: '',
    j: '',
    l: '',
  });
</script>
<style scoped lang="less">
  @import url('./index.less');
  .app-page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 24px;
    .state {
      font-family: Microsoft YaHei;
      font-size: 22rem;
      color: #1169e5;
      margin-bottom: 20px;
      img {
        width: 20rem;
        margin-right: 14rem;
      }
    }
    .ant-form {
      width: 90%;
      margin: 0 auto;
      /deep/.ant-col {
        margin-bottom: 16px;
      }
    }
    .total {
      width: 100%;
      text-align: right;
      span {
        margin-left: 100px;
        em {
          font-style: normal;
          color: #ef6410;
        }
      }
    }
    .plan-desc {
      width: 90%;
      background-image: url(/@/assets/images/plan-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0 auto 50px;
      padding: 20px;
      box-sizing: border-box;
      .plan-name {
        font-family: Microsoft YaHei;
        font-size: 30px;
        color: #ffffff;
        margin-bottom: 50px;
      }
      .plan-info {
        text-align: right;
        span {
          font-size: 18px;
          color: #ffffff;
          margin-left: 60px;
          em {
            font-size: 22px;
            font-style: normal;
            color: #ffffff;
          }
        }
      }
    }
  }
</style>
